<template>
  <CollapseContainer title="安全设置" :canExpan="false">
    <List>
      <template v-for="item in list" :key="item.key">
        <ListItem>
          <ListItemMeta>
            <template #title>
              {{ item.title }}
              <div class="extra" v-if="item.extra" @click="extraClick(item)">
                {{ item.extra }}
              </div>
            </template>
            <template #description>
              <div>{{ item.description }} </div>
            </template>
          </ListItemMeta>
        </ListItem>
      </template>
    </List>
  </CollapseContainer>
  <UpdatePassword ref="updatePasswordRef" @success="getSettingInfo" />
  <SecureSettingEmail ref="secureSettingEmailRef" @success="getSettingInfo" />
  <SecureSettingMobile ref="secureSettingMobileRef" @success="getSettingInfo" />
  <SecureSettingQuestion ref="secureSettingQuestionRef" @success="getSettingInfo" />
</template>
<script lang="ts">
  import { List } from 'ant-design-vue';
  import { defineComponent, ref, unref, reactive, onMounted } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { defHttp } from '/@/utils/http/axios';
  import { secureSettingList } from './data';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  import { useUserStore } from '/@/store/modules/user';
  import { useMessage } from '/@/hooks/web/useMessage';
  export default defineComponent({
    components: {
      CollapseContainer,
      List,
      ListItem: List.Item,
      ListItemMeta: List.Item.Meta,
      UpdatePassword: createAsyncComponent(() => import('/@/layouts/default/header/components/user-dropdown/UpdatePassword.vue')),
      SecureSettingEmail: createAsyncComponent(() => import('./SecureSettingEmail.vue')),
      SecureSettingMobile: createAsyncComponent(() => import('./SecureSettingMobile.vue')),
      SecureSettingQuestion: createAsyncComponent(() => import('./SecureSettingQuestion.vue')),
    },
    setup() {
      const { createMessage } = useMessage();
      const userStore = useUserStore();
      const updatePasswordRef = ref();
      const secureSettingEmailRef = ref();
      const secureSettingMobileRef = ref();
      const secureSettingQuestionRef = ref();

      const secureList = reactive(secureSettingList);

      onMounted(async () => {
        getSettingInfo();
      });

      function fillDescription(key, descr) {
        const secrreItem = secureList.filter((item) => item.key == key);
        if (secrreItem && secrreItem.length > 0) {
          secrreItem[0].description = descr;
        }
      }

      function fillExtra2(key, extra2) {
        const secrreItem = secureList.filter((item) => item.key == key);
        if (secrreItem && secrreItem.length > 0) {
          secrreItem[0].extra2 = extra2;
        }
      }

      function extraClick(item) {
        if (item.key == '1') {
          updatePasswordRef.value.show(userStore.getUserInfo.id);
        } else if (item.key == '2') {
          secureSettingMobileRef.value.show(userStore.getUserInfo.username);
        } else if (item.key == '3') {
          secureSettingQuestionRef.value.show(userStore.getUserInfo.username, item.extra2);
        } else if (item.key == '4') {
          secureSettingEmailRef.value.show(userStore.getUserInfo.username);
        } else if (item.key == '5') {
          createMessage.warning('暂不支持设置MFA 设备');
        } else {
          createMessage.warning('暂不支持');
        }
      }

      async function getSettingInfo() {
        try {
          let params = Object.assign({ userid: unref(userStore.getUserInfo.id) });
          let url = '/api-upms/sys/user/getSecurity/' + params.userid;
          defHttp.get({ url: url }, { isTransformResponse: false }).then((res) => {
            if (res.success) {
              let data = res.data;
              if (data.pwdSecurityLevel == 0 || data.pwdSecurityLevel == 1) {
                fillDescription('1', '当前密码强度：很弱');
              } else if (data.pwdSecurityLevel == 2) {
                fillDescription('1', '当前密码强度：弱');
              } else if (data.pwdSecurityLevel == 3) {
                fillDescription('1', '当前密码强度：强');
              } else if (data.pwdSecurityLevel == 3) {
                fillDescription('1', '当前密码强度：很强');
              }

              fillDescription('2', '已绑定手机：' + data.mobile);

              if (data.pwdQuestion) {
                fillDescription('3', '已设置密保问题');
                fillExtra2('3', { question1: data.pwdQuestion, question2: data.pwdQuestionTwo, question3: data.pwdQuestionThree });
              } else {
                fillDescription('3', '未设置密保问题，密保问题可有效保护账户安全');
              }

              fillDescription('4', '已绑定手机：' + data.email);

              // const userinfo = userStore.getUserInfo;
              // Object.assign(userinfo, { pwdSecurityLevel: data.pwdSecurityLevel });
              // userStore.setUserInfo(userinfo);
            }
          });
        } finally {
        }
      }
      return {
        updatePasswordRef,
        secureSettingEmailRef,
        secureSettingMobileRef,
        secureSettingQuestionRef,
        extraClick,
        getSettingInfo,
        list: reactive(secureList),
      };
    },
  });
</script>
<style lang="less" scoped>
  .extra {
    float: right;
    margin-top: 10px;
    margin-right: 30px;
    font-weight: normal;
    color: #1890ff;
    cursor: pointer;
  }
</style>
